<template>
	<view class="bg pl-30 pr-30 pt-30">
		<!-- 头部 -->
		<view class="pt-30 pl-40 pr-30 wallet-head">
			<view class="">
				<view class="size-26" style="color: #fff;">我的余额</view>
				<view class="size-44 mt-10" style="color: #fff;">{{walletAccount}}</view>
				<!-- <view class="">
					<button type="default" class="topBtn" @click="recharge">充值</button>
				</view> -->
			</view>
			<view class="flex1 flex-end">
				<button class="topBtn blue" @click="toWithdraw">提现</button>
				<button class="topBtn" @click="recharge">充值</button>
			</view>
		</view>
		<view class="wallet-screen flex pt-30 pb-30">
			<view class="size-30 white">账单明细</view>
			<!-- <view class="wallet-screen-more">
				<text>筛选时间</text>
				<image src="/static/mine/screen.png" mode=""></image>
			</view> -->
		</view>
		<!-- <view class="wallet-main">
			<view class="wallet-main-head flex pt-40 pb-40 flex-around">
				<view :class="{active:index == 0}" class="color-9 size-28" v-for="(item,index) in 4" :key="index">全部</view>
			</view>
			<view class="pb-10">
				<view class="mb-20 wallet-main-li pb-20 pt-20 pl-30 pr-30">
					<view class="size-26 white mb-10">提现到支付宝</view>
					<view class="flex">
						<text class="color-9 size-24">2022-02-25  16:26</text>
						<text class="size-26 white">+500</text>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 列表 -->
		<view class="btmWrap pb-30">
			<!-- 筛选 -->
			<!-- <view class="flex mb-30 white">
				<u-field @click="chooseDate(0)" class="midInput" placeholder-style="color:#cdcdcd" v-model="start_time"
					label-width="20" placeholder="开始时间" :disabled="true" :border-top="false"  :border-bottom="false">
					<u-icon name="calendar" color="#cdcdcd" size='30' slot="icon"></u-icon>
				</u-field>
				<view class="bold size-26">
					至
				</view>
				<u-field class="midInput" @click="chooseDate(1)" placeholder-style="color:#cdcdcd" v-model="end_time"
					label-width="20" placeholder="结束时间" :disabled="true" :border-top="false" :border-bottom="false">
					<u-icon name="calendar" color="#cdcdcd" size='30' slot="icon"></u-icon>
				</u-field>
				<view class="bold size-26" @click="toSearch">
					确定
				</view>
			</view> -->
			
			<!-- 列表 -->
			<view class="" v-if="lists.length">
				<view class="recordItem mb-20 bg-1 radius-16 ptb-30 plr-30 flex" v-for="(item,index) in lists" :key="index">
					<view>
						<view class="flex size-28 bold">
							<view class="white">充值</view>
						</view>
						<view class="flex mt-30 gray-2 size-24">
							<!-- <view class="">时间</view> -->
							<view style="color: #7c7c7c">{{item.pay_time}}</view>
						</view>
					</view>
					<view>
						<text style="color: #e74e34">+{{item.price}}</text>
					</view>
				</view>
			</view>
			<view v-if="list.length">
				<view class="recordItem mb-20 bg-1 radius-16 ptb-30 plr-30 flex" v-for="(item,index) in list" :key="index">
					<view>
						<view class="flex size-28 bold">
							<view class="white">
								{{item.bill_type}}
							</view>
						</view>
						<view class="flex mt-30 gray-2 size-24">
							<!-- <view class="">
								时间
							</view> -->
							<view class="" style="color: #7c7c7c">
								{{item.create_time}}
							</view>
						</view>
					</view>
					<view>
						<text v-if="item.type==1" style="color: #e74e34">+{{item.account}}</text>
						<text v-if="item.type==2" class="gray-2">-{{item.account}}</text>
					</view>
				</view>
			</view>
			<empty v-if="!list.length && !lists.length"></empty>
		</view>
		<!-- 时间筛选 -->
		<u-calendar v-model="dateShow" @change="submitDate" mode="date"></u-calendar>
	</view>
</template>

<script>
	import tab from "../../components/tab.vue"
	import empty from "../../components/empty.vue"
	export default {
		components: {
			tab,
			empty
		},
		data() {
			return {
				flag :false,
				page:1,
				start_time:'',
				end_time:'',
				dateShow: false,
				info: '',
				list: [],
				dateType:0,
				walletAccount:0,
				status: 'more',
				lists:[],
				pageIndex:1,
				last_page:0,//
			}
		},
		onShow() {
			this.page = 1
			this.pageIndex = 1
			this.init();
			this.$http('api/account/account').then(res => {
				this.walletAccount = res.account;
			})
		},
		onHide() {
			this.list=[];
			this.flag = false;
			this.status = 'more';
			this.page = 1;
		},
		onReachBottom() {
			if (!this.flag) {
				this.status = "loading";
				this.page++;
				this.init();
			}
		},
		onPullDownRefresh() {
			this.flag = false;
			this.page = 1;
			this.pageIndex = 1
			this.init();
		},
		methods: {
			//充值
			recharge () {
				uni.navigateTo({
					url:'/pages/my/recharge'
				})
			},
			init(){
				this.$http('api/bill/billList',{
					page:this.page,
					pagesize:10,
					start_time:this.start_time,
					end_time:this.end_time
				}).then(res => {
					uni.stopPullDownRefresh();
					let data = res.data;
					this.list = this.page == 1 ? res.data : [...this.list,...res.data]
					if (data.length == 0) {
						this.flag = true;
						this.status = 'noMore'
					} else {
						// this.list = this.list.concat(data);
						if (data.length < 10) {
							this.flag = true;
							this.status = 'noMore'
						}
					}
				})
				this.$http('api/newapi/chongZhiLiu',{
					page:this.pageIndex
				}).then(res=>{
					this.lists = this.pageIndex == 1 ? res.data : [...this.lists,...res.data] 
					this.last_page = res.last_page
				})
			},
			toWithdraw(){
				uni.navigateTo({
					url:"./withdraw"
				})
			},
			// 选择时间
			chooseDate(type) {
				this.dateShow = true;
				this.dateType=type;
			},
			submitDate(e){
				if(this.dateType==0){
					this.start_time=e.result;
				}else{
					this.end_time=e.result;
				}
			},
			toSearch(){
				this.page=1;
				this.list=[];
				this.init();
			},
			onNavigationBarButtonTap () {
				uni.navigateTo({
					url: "/pages/my/bindBank"
				})
			},
		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="less" scoped>

page{
	background: #f5f5f5;
}
.white {
  color: #3c3c3c;
}
.gold {
  color: #9c8b66;
}
	.recordItem {
		background: #fff;
	}
	.topBtn {
		width: 130rpx;
		height: 56rpx !important;
		background: #21263d90;
		border-radius: 28rpx;
		color:#FFFFFF;
		font-size: 28rpx;
		line-height: 56rpx;
		margin: 0;
		&::after {
			border: none;
		}
	}
	.blue {
		margin-right: 20rpx;
		background: linear-gradient(0deg, #A776F7 0%, #6990F7 100%);
	}
	.wallet-head {
		height: 224rpx;
		background: url('@/static/mine/wallet_bj.png') no-repeat;
		background-size: cover;
	}
	
	.wallet-screen-more {
		text {
			color: #FFFFFF;
			font-size: 26rpx;
		}
		image {
			width: 24rpx;
			height: 24rpx;
			margin-left: 10rpx;
		}
	}
	.active {
		position: relative;
		color: #FFFFFF;
		font-size: 28rpx;
		font-weight: bold;
		&::after {
			position: absolute;
			content: '';
			left: 50%;
			transform: translateX(-50%);
			bottom: -14rpx;
			width: 40rpx;
			height: 3rpx;
			background: linear-gradient(90deg, #34D1F9 0%, #37DC6D 98%);
			border-radius: 2rpx;
		}
	}
	.wallet-main-li {
		background: #27283B;
		border-radius: 20rpx;
	}
	.wallet-main {
		background: #434457;
		border-radius: 20rpx 20rpx 0 0;
		padding: 0 20rpx;
	}

	.btmWrap {
		border-radius: 30rpx 30rpx 0 0;

	}

	/deep/ .midInput {
		width: 280rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 18rpx 0 0 30rpx!important;
	}
</style>
